<!DOCTYPE html>
<html lang="zh">

<head>
    <meta charset="utf-8">
    <link rel="stylesheet" href="style.css">
    <title>音频小动效</title>
    <style>
        .app {
            width: 100%;
            height: 100vh;
            background-color: #ffffff;
            position: relative;
            display: flex;
            justify-content: center;
            align-items: center;
        }

        .audio-box37 {
            width: 84px;
            height: 32px;
            display: flex;
            justify-content: space-between;
            align-items: flex-end;
        }

        .audio37-block {
            width: 6px;
            box-sizing: border-box;
            background-color: #97E138;
            animation: audio73-eff 2s linear infinite;
            box-shadow: 0 -1px 0 #ffffff, 0 -2px 0 #97E138;
        }

        .audio37-block:nth-of-type(2) {
            background-color: #FF3A85;
            animation-delay: .3s;
            animation-duration: 2.4s;
            box-shadow: 0 -1px 0 #ffffff, 0 -2px 0 #FF3A85;
        }

        .audio37-block:nth-of-type(3) {
            background-color: #A2DAF6;
            animation-delay: .38s;
            box-shadow: 0 -1px 0 #ffffff, 0 -2px 0 #A2DAF6;
        }

        .audio37-block:nth-of-type(4) {
            background-color: #FFD6D0;
            animation-delay: .5s;
            box-shadow: 0 -1px 0 #ffffff, 0 -2px 0 #FFD6D0;
        }

        .audio37-block:nth-of-type(5) {
            background-color: #FF472C;
            animation-duration: 2.7s;
            box-shadow: 0 -1px 0 #ffffff, 0 -2px 0 #FF472C;
        }

        .audio37-block:nth-of-type(6) {
            background-color: #DE74CE;
            animation-delay: .6s;
            animation-duration: 1.4s;
            box-shadow: 0 -1px 0 #ffffff, 0 -2px 0 #DE74CE;
        }

        .audio37-block:nth-of-type(7) {
            background-color: #36AFCA;
            animation-delay: .8s;
            box-shadow: 0 -1px 0 #ffffff, 0 -2px 0 #36AFCA;
        }

        @keyframes audio73-eff {
            0% {
                height: 0;
            }

            50% {
                height: 32px;
            }

            100% {
                height: 0;
            }
        }
    </style>
</head>

<body>
    <div class="app">
        <div class="audio-box37">
            <div class="audio37-block"></div>
            <div class="audio37-block"></div>
            <div class="audio37-block"></div>
            <div class="audio37-block"></div>
            <div class="audio37-block"></div>
            <div class="audio37-block"></div>
            <div class="audio37-block"></div>
        </div>
    </div>
</body>

</html>